<template>
  <view class="wrap">
     <top-tab tabTitle="签到兑换现金" @backClick="backClick" backColor="#6732B8"/>
		 <view class="header-box">
			 <view class="header-integ">
					<view class="my-integral-box">
						<view class="integral">我的积分</view>
						<view class="item-num-rule">
							<view class="number">{{myScore}}</view>
							<view class="rule" @click="$refs.rulePopup.open('')">兑换规则</view>
						</view>
					</view>
			 </view>
			 <view class="sign-card">
				<view class="sign-integ">签到领积分</view>
				<view class="date-signin ">
					<view class="icon-box" v-for="(item,index) in iconfont" :key="item.id">
						<view class="iconfont"  :class="item.isShow || item.id == numberOf ? 'skyTime' : ''">{{item.iconUrl}}</view>
						<view class="name">{{item.name}}</view>
					</view>
				</view>
				<view class="today-sign" @click="signIn">今日签到</view>
			 </view>
		 </view>
		<!-- 做任务赚积分 -->
		<view class="task-main">
			<view class="task-integ">
				<view class="integral-back">
					<image src="/static/my/integral_back.png" class="img"></image>
					<view class="title">做任务赚积分</view>
				</view>
				<view class="item-list" v-for="(item,index) in taskList" :key="item.id">
					<view class="img-text-btn">
						<view class="img-box">
							<image class="img" :src="item.url"></image>
						</view>
						<view>
							<view class="invite-register">{{item.title}}</view>
							<view class="mini-procedure">{{item.subhead}}</view>
						</view>
					</view>
					<view class="go-accom" @click="inviteFridnd">去完成</view>
				</view>
			</view>
			<!-- 轮播 -->
			<view class="add-vip-box">
				<view class="title">积分兑换</view>
				<view class="purchase" @click="buyRecord">更多</view>
			</view>
			<view class="add-vip-btn-box">
				<view class="item-money" v-for="(item,index) in addVip" :key="item.id">
					<view class="day-vip">{{item.title}}</view>
					<view class="money">{{item.pointPrice}}<text class="unit">分</text></view>
					<view class="top-price">￥{{item.originalPrice}}.00</view>
					<view class="once-open" @click="addPay(item.id)">立即兑换</view>
					<view class="postion-left"></view>
					<view class="postion-right"></view>
				</view>
			</view>
		</view>
		<!-- 兑换提示框 -->
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog mode="base" title="兑换积分" 
			:duration="2000" type="info"
			@confirm="confirm"
			>
			<view>确认兑换积分吗？</view>
			</uni-popup-dialog>
		</uni-popup>
		<!-- 兑换规则弹框 -->
		<uni-popup ref="rulePopup" type="center">
			<view class="popup-main">
				<view class="title">签到打卡积分规则</view>
				<view class="num-text-box">
					<view class="back-num">1</view>
					<view class="text">每日签到可获得积分，当日重复签到不会重复计数</view>
				</view>
				<view class="num-text-box">
					<view class="back-num">2</view>
					<view class="text">签到以周为单位周期分别（为星期一 ，星期二，星期三，星期四，星期五，星期六，星期日</view>
				</view>
				<view class="num-text-box">
					<view class="back-num">3</view>
					<view class="text">每日签到的积分对应数值不唯一（准确数值以APP的签到活动页面为准） 例如： 星期1 签到 或得1积分 星期2签到获得2积分 星期三签到获得3积分 若星期2没有签到，星期3签到也能正常获得3积分</view>
				</view>
				<view class="num-text-box">
					<view class="back-num">4</view>
					<view class="text">当连续签到中断后，之前签到攒下的积分会保留，不会清零.</view>
				</view>
				<view class="num-text-box">
					<view class="back-num">5</view>
					<view class="text">签到与做人任务获得的积分兑换奖励，会被扣除相应积分，</view>
				</view>
				<view class="num-text-box">
					<view class="back-num">6</view>
					<view class="text">使用积分在积分商城进行兑换，兑换申请一经提交, 一律不能取消</view>
				</view>
				<view class="num-text-box">
					<view class="back-num">7</view>
					<view class="text">签到与做任务获得的积分使用过程中不找零、不兑现、不开发票，不可转移至其他账户</view>
				</view>
			</view>
			<uni-icons type="clear" @click="$refs.rulePopup.close()" class="icon-clear" size="30" color="red"></uni-icons>
		</uni-popup>
  </view>
</template>

<script>
	import topTab from '@/components/top-tabbar.vue'
	import { $POST, $GET } from '@/network/api.js'
	import { formatDate } from '@/network/date.js'
  export default {
		components: { topTab },
    data() {
      return {
				todayTimes: false,
				inegExchange: { // 兑换积分参数
					account: '', // 登录人账号
					pointsGoodsId: '', // 积分商品id
					pointsGoodsStatus: 1, // 状态：上架=1，下架=0
				},
				current: 0,
				myScore: 0, // 我的积分
				userData: uni.getStorageSync('user_key'), // 获取个人信息
				integInFrom: {
					endDateTime: new Date().getTime(), // 查询的截止时间（时间戳）
					startDateTime: '' // 查询的开始时间（时间戳
				},
				integGoodsFrom: { // 积分商品参数
					goodsInfo: 1, // 商品状态：1=正常，0=禁用
					points: '', // 用户已有的积分值
					pointsGoodsStatus: 1 // 状态：上架=1，下架=0
				},
				numberOf: '', // 当前天数
				addVip: [], // 积分商品数据
				taskList: [
					{ id: 1, title: '邀请好友成功注册', subhead: '登录海报小程序可+1积分', url: '/static/my/sign_a.png'},
					{ id: 2, title: '点赞、评论', subhead: '每日兑换一次现金可加+2积分', url: '/static/my/click_praise.png'},
					{ id: 3, title: '首充', subhead: '邀请好友使用，注册后可+5积分', url: '/static/my/topup.png'}
				],
				iconfont: [ 
					{ id: 1, iconUrl: "\ue605", name: "星期一" },  { id: 2, iconUrl: "\ue605", name: "星期二" }, { id: 3, iconUrl: "\ue605", name: "星期三" },
				  { id: 4, iconUrl: "\ue605", name: "星期四" },  { id: 5, iconUrl: "\ue605", name: "星期五" }, { id: 6, iconUrl: "\ue605", name: "星期六" }, 
					{ id: 7, iconUrl: "\ue605", name: "星期日" },
				]
			}
    },
		onLoad() {
			this.getWeekFirstDayDateZeroTime()
			this.queryInteg() // 查询签到
			this.queryScore() // 查询积分
			this.integralGoods() // 可兑换的积分商品
		},
  onShow() {},
  methods: {
		// 可兑换的积分商品
		async integralGoods() {
			const res = await $POST("/boke-item/user/converPointsGoodsList",this.integGoodsFrom)
			this.addVip = res.data
		},
		// 可用积分
		queryScore() {
			$POST("/boke-item/user/selectIntegral",{ account: this.userData.account }).then(res => {
				this.myScore = res.data.integral // 可用积分赋值
				this.integGoodsFrom.points = res.data.integral // 可用积分赋值
			})
		},
		// 签到
		signIn() {
			let todayTime = new Date().getDay() || 7
			this.iconfont.forEach(item => {
				if(item.today == todayTime) {
					this.todayTimes = true
				}
			})
			if (this.todayTimes) {
				uni.showToast({title: "今天已签到", icon:'none'})
				return false
			}
			$POST("/boke-item/user/signIn",{timer: new Date().getDay() || 7 }).then(res => {
				uni.showToast({title: "签到成功", icon:'none'})
				this.numberOf =  new Date().getDay() || 7
			})
		}, 
		// 查询签到
		queryInteg() {
			$POST("/boke-item/user/signInList",this.integInFrom).then(res => {
				if(res.data.length) {
					res.data.forEach(item => {
						let DataTime = formatDate(item.signInTime)
						item.today = new Date(DataTime).getDay() || 7
					})
					const arr = res.data
					this.iconfont.forEach(j => {
						arr.forEach(k => {
							if (k.today === j.id) {
								j.isShow = true
								j.today =  k.today
							}
						})
					})
				}
			})
		},
		getWeekFirstDayDateZeroTime() {
			let nowTemp = new Date(); // 当前时间
			let oneDayLong = 24 * 60 * 60 * 1000 ; // 一天的毫秒数
			let c_time = nowTemp.getTime() ; // 当前时间的毫秒时间
			let c_day = nowTemp.getDay() || 7; // 当前时间的星期几
			let m_time = c_time - (c_day - 1) * oneDayLong; // 当前周一的毫秒时间
			this.integInFrom.startDateTime = this.getDateZeroTime(m_time) // 当前周一0点时间戳
		},
		// 周一0点的时间戳
		getDateZeroTime(date) {
			if (typeof date == 'undefined') {
				throw new Error('date is undefined!');
			}
			if (typeof date == 'number') {
				return new Date(new Date(date).toLocaleDateString()).getTime()
			}
			if (typeof date == 'object') {
				return new Date(date.toLocaleDateString()).getTime()
			}
		},
		// 单选框事件
		radioChange(e) {
			this.current = e
		},
		// 兑换积分
		async confirm() {
			const res = await $POST("/boke-item/user/pointExchange",this.inegExchange)
			if(res.code === "0000000") {
					uni.showToast({title: "兑换成功", icon:'none'})
			}
		},
		// 打开弹窗
		addPay(id) {
			this.inegExchange.account = this.userData.account // 账号赋值
			this.inegExchange.pointsGoodsId = id // 积分id赋值
			this.$refs.popup.open('')
		},
		// 去完成
		inviteFridnd() {
			uni.navigateTo({
				url: '/pages/my/sign/invite_friend'
			})
		},
		// 更多-跳积分商城
		buyRecord() {
			uni.navigateTo({
				url: '/pages/my/sign/store'
			})
		},
		// 返回上一页
		backClick() {
			uni.switchTab({
			   url: '/pages/my/index'
			});
		}
	}
}
</script>

<style lang="scss" scoped>
	view{
		box-sizing: border-box;
	}
	.header-box{
		position: relative;
		.header-integ{
			height: 298rpx;
			background-color: #6732B8;
			border-radius: 0 0 15% 15%;
			.my-integral-box{
				padding: 0 30rpx;
				.integral{
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					margin-bottom: 30rpx;
				}
				.item-num-rule{
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #FFFFFF;
					.number{
						font-size: 60rpx;
						font-family: PingFang SC;
						font-weight: 600;
					}
					.rule{
						padding: 11rpx 29rpx;
						border: 2rpx solid #FFFFFF;
						border-radius: 25rpx;
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 400;
					}
				}
			}
		}
		.sign-card{
			width: 690rpx;
			// height: 281rpx;
			background: #FFFFFF;
			box-shadow: 0px 10rpx 15rpx 0px rgba(99, 77, 255, 0.2);
			border-radius: 16rpx;
			position: absolute;
			left: 0;
			right: 0;
			bottom: -187rpx;
			margin: auto;
			padding: 30rpx 20rpx;
			box-sizing: border-box;
			.sign-integ{
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
				padding-left: 12rpx;
			}
			.date-signin{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.icon-box{
					margin: 35rpx 0;
					.iconfont{
						color: #D9D7D8;
						font-size: 58rpx;
					}
					.name{
						margin-top: 20rpx;
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #333333;
					}
					.skyTime{
						color: #F29D79 !important;
					}
				}
			}
			.today-sign{
				width: 400rpx;
				height: 54rpx;
				background: linear-gradient(90deg, #6732B8, #934CFF);
				border-radius: 27rpx;
				line-height: 54rpx;
				text-align: center;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				margin: auto;
				letter-spacing:2px;
			}
		}
	}
	// 做任务赚积分
	.task-main{
		padding: 0 30rpx;
		margin-top: 267rpx;
		.task-integ{
			width: 100%;
			// height: 570rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 15rpx 0px rgba(99, 77, 255, 0.2);
			border-radius: 16rpx;
			padding: 30rpx;
			.integral-back{
				width: 275rpx;
				height: 50rpx;
				margin: auto;
				position: relative;
				.img{
					width: 100%;
					height: 100%;
				}
				.title{
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					position: absolute;
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
					text-align: center;
					line-height: 50rpx;
					letter-spacing:2px;
				}
			}
			.item-list:last-child{
				border-bottom: none !important;
				padding-bottom: 0 !important;
			}
			.item-list{
				padding: 36rpx 0;
				border-bottom: 1rpx solid #E5E5E5;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.img-text-btn{
					display: flex;
					align-items: center;
					.img-box{
						width: 98rpx;
						height: 98rpx;
						border-radius: 50%;
						background: #E5D5FF;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 30rpx;
						.img{
							// display: block;
							width: 42rpx;
							height: 48rpx;
						}
					}
					.invite-register{
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
						margin-bottom: 18rpx;
					}
					.mini-procedure{
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #747980;
					}
				}
				.go-accom{
					width: 132rpx;
					height: 60rpx;
					background: linear-gradient(90deg, #6732B8, #934CFF);
					border-radius: 30rpx;
					line-height: 60rpx;
					text-align: center;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					letter-spacing:2px;
				}
			}
		}
		// 轮播
		.add-vip-box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 67rpx 0 44rpx 0;
				.logo-back{
					width: 4rpx;
					height: 40rpx;
					background: #B73DF0;
					border-radius: 2rpx;
				}
				.title{
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
			
			.purchase{
				font-size: 24rpx;
				font-family: PingFang SC;
				color: #999999;
				padding-right: 33rpx;
			}
		}
		.add-vip-btn-box::-webkit-scrollbar {
				display: none; 
			}
		.add-vip-btn-box{
			// width: 100%;
			padding-bottom: 163rpx;
			display: flex;
			align-items: center;
			overflow-x: auto; 
			overflow-y: hidden;
			display: -webkit-box; 
			-webkit-overflow-scrolling: touch;
			.item-money:first-child{
				.once-open{
					background: linear-gradient(90deg, #B83DF1, #852CAE);
					-webkit-text-fill-color: #FFFFFF;
				}
			}
			.item-money{
				width: 191rpx;
				background: #FEE5C9;
				border-radius: 7rpx 7rpx 0 0;
				text-align: center;
				position: relative;
				margin-right: 30rpx;
					.day-vip{
						width: 112rpx;
						height: 30rpx;
						background: #F29B76;
						border-radius: 0px 0px 7rpx 7rpx;
						font-size: 20rpx;
						color: #FFFFFF;
						line-height: 30rpx;
						text-align: center;
						margin: auto;
					}
				.money{
					font-size: 83rpx;
					font-family: Arial;
					font-weight: 600;
					color: rgba(255, 255, 255, 0.78);
					opacity: 0.87;
					text-shadow: 0px 1px 1px rgba(74, 74, 74, 0.52);
					background: linear-gradient(63deg, #4907AC 0%, #A95924 0%, #573132 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					padding-top: 33rpx;
					.unit{
						font-size: 24rpx;
					}
				}
				.top-price{
					font-size: 24rpx;
					font-weight: 500;
					color: rgba(255, 255, 255, 0.78);
					text-shadow: 0px 1px 1px rgba(74, 74, 74, 0.52);
					background: linear-gradient(63deg, #4907AC 0%, #A95924 0%, #573132 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					text-decoration:line-through  #333333;
					padding-bottom: 45rpx !important;
				}
				
				.once-open{
					padding: 27rpx 0;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					border-top: 1rpx solid #ECAF8D;
					background: linear-gradient(63deg, #4907AC 0%, #A95924 0%, #573132 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
				.postion-left{
					width: 26rpx;
					height: 26rpx;
					background: #FFFFFF;
					border-radius: 50%;
					position: absolute;
					left: -7px;
					top:68%;
				}
				.postion-right{
					width: 26rpx;
					height: 26rpx;
					background: #FFFFFF;
					border-radius: 50%;
					position: absolute;
					right: -7px;
					top:68%;
				}
			}
		}
	}
	// 弹窗样式
	.popup-main{
		width: 640rpx;
		padding-bottom: 50px;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 40rpx;
		box-sizing: border-box;
		.title{
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #333333;
			text-align: center;
			margin-bottom: 38rpx;
		}
		.num-text-box{
			display: flex;
			
			.back-num{
				width: 32rpx;
				height: 32rpx;
				background: linear-gradient(90deg, #ED557B, #D94369);
				border-radius: 50%;
				color: #FFFFFF;
				font-size: 24rpx;
				line-height: 32rpx;
				text-align: center;
			}
			.text{
				width: 100%;
				padding-left: 20rpx;
				margin-bottom: 20rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
				// line-height: 44px;
			}
		}
	}
	.icon-clear{
		position: absolute;
		top:-30rpx;
		right: -20rpx;
	}
</style>
